<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div layout="row" flex class="api-events" style="margin-top: 20px">
  <div class="api-history-timeline" flex="20">
    <timeline>
      <div ng-repeat="eventTimeline in apiHistoryCtrl.eventsTimeline">
        <timeline-event side="right">
          <timeline-badge class="{{eventTimeline.badgeClass}}">
            <div class="api-history-timeline__timeline-badge-container">
              <gv-icon shape="{{eventTimeline.badgeIconClass}}" class="api-history-timeline__timeline-badge-container__icon"> </gv-icon>
            </div>
          </timeline-badge>
          <a class="timeline-link" ng-click="apiHistoryCtrl.selectEvent(eventTimeline)">
            <timeline-panel ng-class="{active : apiHistoryCtrl.isEventSelected(eventTimeline)}" class="{{eventTimeline.badgeClass}}">
              <timeline-heading>
                <div class="api-history-timeline_heading-title">
                  <h5>
                    {{eventTimeline.title | uppercase}} {{eventTimeline.deploymentNumber ? '#' + eventTimeline.deploymentNumber : ''}}
                  </h5>
                  <gv-icon
                    class="api-history-icon"
                    ng-show="apiHistoryCtrl.eventToCompareRequired && !apiHistoryCtrl.isEventSelected(eventTimeline)"
                    shape="design:border"
                  ></gv-icon>
                  <gv-icon
                    class="api-history-icon"
                    ng-show="apiHistoryCtrl.isEventSelectedForComparaison(eventTimeline)"
                    shape="code:git#4"
                  ></gv-icon>
                </div>
                <p ng-if="eventTimeline.deploymentLabel">
                  <small class="text-muted ng-binding">
                    <gv-icon shape="action:info" class="api-history-timeline__timeline-small-icon"> </gv-icon>
                    {{eventTimeline.deploymentLabel}}</small
                  >
                </p>
                <p ng-if="eventTimeline.when">
                  <small class="text-muted ng-binding">
                    <gv-icon shape="home:clock" class="api-history-timeline__timeline-small-icon"> </gv-icon>
                    {{eventTimeline.when | date : 'medium'}} by {{eventTimeline.user.displayName}}
                  </small>
                </p>
                <p ng-if="eventTimeline.isCurrentAPI">
                  <small class="text-muted ng-binding">
                    <gv-icon shape="action:info" class="api-history-timeline__timeline-small-icon"> </gv-icon>
                    In progress API definition</small
                  >
                </p>
              </timeline-heading>
            </timeline-panel>
          </a>
        </timeline-event>
      </div>
    </timeline>
  </div>

  <div class="api-events-content" flex="80">
    <div ng-show="apiHistoryCtrl.eventsSelected.length == 1" class="api-events-content-descriptor">
      <md-card style="box-shadow: none">
        <div ng-show="apiHistoryCtrl.eventsTimeline.length > 1" class="api-event-content_actions">
          <div>
            <gv-button
              ng-show="apiHistoryCtrl.eventsSelected[0].isCurrentAPI"
              icon="finance:cloud-upload"
              ng-click="apiHistoryCtrl.$scope.$parent.apiCtrl.showDeployAPIConfirm($event, apiHistoryCtrl.api)"
              >Deploy</gv-button
            >
            <gv-button
              permission
              permission-only="'api-definition-u'"
              icon="code:time-schedule"
              ng-show="(!apiHistoryCtrl.eventsSelected[0].isCurrentAPI && apiHistoryCtrl.eventsSelected[0].event.id != apiHistoryCtrl.events[0].id) || (!apiHistoryCtrl.eventsSelected[0].isCurrentAPI && apiHistoryCtrl.eventsTimeline[0].isCurrentAPI)"
              ng-click="apiHistoryCtrl.showRollbackAPIConfirm($event, apiHistoryCtrl.eventSelectedPayload)"
              >Rollback</gv-button
            >
            <gv-popover class="clipboard__popover" event="click" delay="750" .arrow="${false}">
              <gv-button outlined class="api-events_copy-btn" icon="general:clipboard" ng-click="apiHistoryCtrl.copyToClipboard($event)"
                >Copy to clipboard</gv-button
              >
              <div slot="popover" class="clipboard__popover-content">
                <gv-icon shape="code:check"></gv-icon>
                <div>Definition copied</div>
              </div>
            </gv-popover>
            <gv-button
              ng-show="apiHistoryCtrl.eventsTimeline.length > 1"
              title="Click and select event from timeline to compare"
              ng-attr-loading="{{apiHistoryCtrl.eventToCompareRequired ? true : undefined}}"
              ng-attr-outlined="{{apiHistoryCtrl.mode !== apiHistoryCtrl.modes.Diff ? true : undefined}}"
              ng-attr-primary="{{apiHistoryCtrl.mode === apiHistoryCtrl.modes.Diff ? true : undefined}}"
              icon="code:git#4"
              ng-click="apiHistoryCtrl.enableDiff()"
              >Diff</gv-button
            >
            <gv-button
              ng-show="apiHistoryCtrl.events.length > 0 && apiHistoryCtrl.eventsSelected[0].event.id != apiHistoryCtrl.events[0].id"
              icon="code:git#3"
              ng-attr-outlined="{{apiHistoryCtrl.mode !== apiHistoryCtrl.modes.DiffWithMaster ? true : undefined}}"
              ng-attr-primary="{{apiHistoryCtrl.mode === apiHistoryCtrl.modes.DiffWithMaster ? true : undefined}}"
              outlined
              ng-click="apiHistoryCtrl.diffWithMaster()"
              >Diff with published API</gv-button
            >
          </div>
          <div class="api-event-content_actions-right">
            <div ng-show="apiHistoryCtrl.hasDiff()" class="api-event_diff-count">
              <span class="api-event_diff-added">+ {{apiHistoryCtrl.added}}</span>
              <span class="api-event_diff-removed">- {{apiHistoryCtrl.removed}}</span>
            </div>
            <gv-switch
              ng-show="apiHistoryCtrl.hasDesign()"
              ng-on-gv-switch:input="apiHistoryCtrl.toggleMode($event)"
              ng-value="apiHistoryCtrl.mode !== apiHistoryCtrl.modes.Design"
              label="Mode"
              description="Design / Definition"
            ></gv-switch>
          </div>
        </div>
        <md-card-content class="api-event-content_content">
          <pre ng-show="apiHistoryCtrl.mode === apiHistoryCtrl.modes.Payload" class="api-history-definition">
{{apiHistoryCtrl.eventSelectedPayloadDefinition | json}}</pre
          >
          <pre
            ng-show="apiHistoryCtrl.hasDiff()"
            class="api-history-definition"
            gravitee-diff
            old-value="apiHistoryCtrl.left"
            new-value="apiHistoryCtrl.right"
          ></pre>
          <gv-policy-studio
            class="api-event_policy-studio"
            flows-title="API Flows"
            readonly
            has-properties
            has-resources
            has-plans
            ng-on-gv-policy-studio:fetch-documentation="apiHistoryCtrl.fetchPolicyDocumentation($event)"
            ng-on-gv-resources:fetch-documentation="apiHistoryCtrl.fetchResourceDocumentation($event)"
            ng-show="apiHistoryCtrl.mode === apiHistoryCtrl.modes.Design"
          ></gv-policy-studio>
        </md-card-content>
      </md-card>
    </div>
  </div>
</div>
<gravitee-empty-state
  ng-if="apiHistoryCtrl.eventsTimeline.length == 0"
  icon="history"
  model="History"
  message="Your API History will appear here"
  sub-message="We will Keep you informed of API changes"
></gravitee-empty-state>
